<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <a href="javascript:history.back();" class="back-button">
                <i class="fa fa-arrow-left"></i> 返回
            </a>
            <p>搜索结果</p>
        </header>

        <!-- 商家列表部分 -->
        <ul class="business">
            <li v-for="item in searchResults" @click="toBusinessInfo(item.businessId)">
                <div class="business-img">
                    <img :src="item.businessImg">
                    <div class="business-img-quantity" v-show="item.quantity > 0">{{ item.quantity }}</div>
                </div>
                <div class="business-info">
                    <h3>{{ item.businessName }}</h3>
                    <p>&#165;{{ this.toFixed2(item.starPrice) }}起送 | &#165;{{ this.toFixed2(item.deliveryPrice) }}配送</p>
                    <p>{{ item.businessExplain }}</p>
                </div>
            </li>
        </ul>
        <div style="height: 0.1vw;"></div>
        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../components/Footer.vue';
import BigNumber from 'bignumber.js';

export default {
    name: 'SearchResults',
    data() {
        return {
            searchResults: [],
            user: {}
        }
    },
    created() {
        this.user = this.$getSessionStorage('user');
        this.searchResults = this.$route.query.results ? JSON.parse(this.$route.query.results) : [];

        // 判断是否登录
        if (this.user != null) {
            this.listCart();
        }
    },
    components: {
        Footer
    },
    methods: {
        toFixed2(price) {
            return new BigNumber(price).toFixed(2);
        },
        listCart() {
            this.$axios.get(`Carts/userId/${this.user.userId}`)
                .then(response => {
                    let cartArr = response.data;
                    // 遍历所有食品列表
                    for (let businessItem of this.searchResults) {
                        businessItem.quantity = 0;
                        for (let cartItem of cartArr) {
                            if (cartItem.businessId == businessItem.businessId) {
                                businessItem.quantity += cartItem.quantity;
                            }
                        }
                    }
                    this.searchResults.sort();
                }).catch(error => {
                    console.error(error);
                });
        },
        toBusinessInfo(businessId) {
            this.$router.push({ path: '/businessInfo', query: { businessId: businessId } });
        }
    }
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}

.back-button {
    position: absolute;
    top: 3.5vw;
    /* 使用相对单位 */
    left: 2.5vw;
    /* 使用相对单位 */
    font-size: 4vw;
    /* 使用相对单位 */
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
}

.back-button i {
    margin-right: 1vw;
    /* 使用相对单位 */
}

/* 针对大屏幕 (如 iPad) 的媒体查询 */
@media (min-width: 768px) {
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .back-button {
        position: absolute;
        top: 3.5vw;
        /* 使用相对单位 */
        left: 2.5vw;
        /* 使用相对单位 */
        font-size: 4vw;
        /* 使用相对单位 */
        text-decoration: none;
        color: white;
        display: flex;
        align-items: center;
    }

    .back-button i {
        margin-right: 1vw;
        /* 使用相对单位 */
    }
}

/****************** 商家列表部分 ******************/
.wrapper .business {
    width: 100%;
    margin-top: 12vw;
    margin-bottom: 14vw;
}

.wrapper .business li {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    border-bottom: solid 1px #DDD;
    user-select: none;
    cursor: pointer;

    display: flex;
    align-items: center;
}

.wrapper .business li .business-img {
    /*这里设置为相当定位，成为business-img-quantity元素的父元素*/
    position: relative;
}

.wrapper .business li .business-img img {
    width: 20vw;
    height: 20vw;
}

.wrapper .business li .business-img .business-img-quantity {
    width: 5vw;
    height: 5vw;
    background-color: red;
    color: #fff;
    font-size: 3.6vw;
    border-radius: 2.5vw;

    display: flex;
    justify-content: center;
    align-items: center;

    /*设置成绝对定位，不占文档流空间*/
    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
}

.wrapper .business li .business-info {
    margin-left: 3vw;
}

.wrapper .business li .business-info h3 {
    font-size: 3.8vw;
    color: #555;
}

.wrapper .business li .business-info p {
    font-size: 3vw;
    color: #888;
    margin-top: 2vw;
}
</style>